The objective: Redesign Garmin Connect
Garmin's suite of fitness devices was growing: GPS-enabled wristwatches and cycling computers fed a rapidly growing market segment, and the company was also launching a line of fitness bands to compete with the hot FitBit trend. Garmin's Connect application was where, as a user, you'd access all the data your devices logged.
That application was long in the tooth and ran on an obsolete platform. It was also never designed for new data formats like sleep-cycle and activity-level tracking. The ask? Redesign the app in six months.
We were a team of four designers, and this is a large application with lots of dynamic data. We divided the work by feature, with each UX designer owning the design of multiple features, soup to nuts. “Soup to nuts” means each designer owned interaction and visual design, information architecture, user testing, wireframes, and code for our features.
The design process began with collaborating with the product manager to define and understand business requirements. One advantage we had was that Garmin's product managers, industrial designers, and marketers were well tuned into the market and its users; the company had a strong fitness culture with many of its employees, myself included, being runners and cyclists who used the products. We did not need to pump the brakes to do user research.
We wanted the experience centered on an at-a-glance, configurable dashboard, so you could set it up according to your own priorities. Some users will want stats like elevation change and average speed to be the default, while others want a map of the run or hike. Multi-sport users like triathletes or cyclists who also golf may set up multiple dashboards, toggled with customizable tabs. The home page used a card metaphor, where you could quickly add cards for activity logs, your latest run or ride, last night's sleep cycle, your social connections, and so on.
In order for the application to be more than a data dump, we also added an awards and badge feature to the application. We also knew cycling, especially, is very often a group activity, so we added shared rides and pre-ride route mapping.
Our designs typically started with wireframes, which for the more complex interactions we'd run through rounds of usability testing. Some of the more complicated visual designs we'd the mock up in Axure or Adobe Illustrator, or we would go directly to high-definition prototyping in HTML/CSS/JavaScript.
The HTML prototype was the source of truth, and the developers would replicate that front end exactly; this gave us granular control over the interactions and design.
The redesign launched on schedule.
